<template>
	<view class="jsmpeg">
		<view class="video" id="tcplayer"></view>
		<!-- 		<view @click="fullscreen()">全屏播放</view> -->
		<!-- <view @click="playButton()">{{playStatu}}</view> --> 
	</view>

</template>

<script>
	import {
		TcPlayer
	} from '@/components/TcPlayer-2.4.1/TcPlayer-2.4.1.js'
	// import {
	// 	JSMpeg
	// } from '@/components/jsMpeg/jsmpeg.min.js'
	export default {
		data() {
			return {
				content: '',
				player: "",
				playUrl: '',
				playStatu: '111'
			}
		},
		computed: {

		},
		mounted() {
			this.play();
			// let canvas = document.getElementById('video')
			// let url = "http://oss.hsy10000.com:9988/vod/202001/灵魂战车.ts"
			// let player = new JSMpeg.Player(url, {
			// 	canvas: canvas
			// })
		},
		onLoad(option) {
			this.obj = JSON.parse(decodeURIComponent(option.obj));
			this.playUrl = this.obj.url
			console.log('上一个页面传递过来的参数对象',this.obj);
		},

		methods: {
			playButton() {
				this.player.togglePlay()

				this.player.fullscreen(true)
			},
			fullscreen() {
				this.player.fullscreen(true)
			},
			play() {

				let option = {

				}
				let _this = this
				this.player = new TcPlayer("tcplayer", {
					"m3u8": this.playUrl, //请替换成实际可用的播放地址
					// "m3u8": "https://imgcdn.lzxrmtzx.com/video1641544543415832378.mp4",
					"autoplay": true, //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
					"live": true,
					"controls": "default",
					"systemFullscreen": true,
					"x5_player": true,
					"h5_flv": true,
					"preload": 'auto',
					"width": '480', //视频的显示宽度，请尽量使用视频分辨率宽度
					"height": '320', //视频的显示高度，请尽量使用视频分辨率高度

					listener: function(msg) {
						console.dir(msg)
						console.log('msg.src.playStatu' + _this.player.playing())
						_this.playStatu = _this.player.playing() ? "暂停播放" : "开始播放"
						// if (msg.type == 'load') {
						// 	var _div = document.createElement('div');
						// 	_div.className = 'marker';
						// 	_div.innerText = '测试';
						// 	document.querySelector('.vcp-player').appendChild(_div)
						// }
					}
				})
				this.$nextTick(function() {
					let videoDom = document.querySelector("video")
					let video = _this.$refs.videoPlayer;
					if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
						WeixinJSBridge.invoke('getNetworkType', {}, function(res) {
							//video.player.play();//这里使用的是基于video.js的vue-player插件
							videoDom.play();
						});
					}
				})
			},
		},
		destroyed() {
			this.player.destroy();
		},
	}
</script>

<style>
	.video {}
</style>
